<!DOCTYPE HTML>
<html>
  <head>
  <!--Created by Phil Wagner 2013, feel free to reuse and share.
  Thanks to jQuery and MIDI.js for their libraries. -->
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>

    <script>
      var GLOBALS = {};
      GLOBALS.noteToGuess = JSON.parse('{{noteToGuess|js_string}}');
    </script>

    <!-- midi.js package -->
    <script src="/third_party/static/jquery-2.0.3/jquery.min.js"></script>
    <script src="/extensions/widgets/interactive/MusicStaff/static/js/MIDI/AudioDetect.js"></script>
    <script src="/extensions/widgets/interactive/MusicStaff/static/js/MIDI/LoadPlugin.js"></script>
    <script src="/extensions/widgets/interactive/MusicStaff/static/js/MIDI/Plugin.js"></script>
    <script src="/extensions/widgets/interactive/MusicStaff/static/js/MIDI/Player.js"></script>
    <script src="/extensions/widgets/interactive/MusicStaff/static/js/Window/DOMLoader.XMLHttp.js">
    </script>
    <script src="/extensions/widgets/interactive/MusicStaff/static/js/Window/DOMLoader.script.js">
    </script>
    <!-- extras -->
    <script src="/extensions/widgets/interactive/MusicStaff/static/js/WebMIDIAPI.js"></script>
    <script src="/extensions/widgets/interactive/MusicStaff/static/js/Base64.js"></script>
    <script src="/extensions/widgets/interactive/MusicStaff/static/js/base64binary.js"></script>
  </head>
  <body onload="onWidgetLoad()">
	<svg
	   xmlns="http://www.w3.org/2000/svg"
	   width="600"
	   height="300"
	   viewPort="0 0 120 120"
	   version="1.1">
	  <line
	     id="staffLineC4" x1="100" y1="200" x2="500" y2="200"
	     stroke="white" stroke-width="1" />
	  <line
	     id="staffLineD4" x1="100" y1="190" x2="500" y2="190"
	     stroke="white" stroke-width="1" />
	  <line
	     id="staffLineE4" x1="100" y1="180" x2="500" y2="180"
	     stroke="black" stroke-width="2" />
	  <line
	     id="staffLineF4" x1="100" y1="170" x2="500" y2="170"
	     stroke="white" stroke-width="1" />
	  <line
	     id="staffLineG4" x1="100" y1="160" x2="500" y2="160"
	     stroke="black" stroke-width="2" />
	  <line
	     id="staffLineA4" x1="100" y1="150" x2="500" y2="150"
	     stroke="white" stroke-width="1" />
	  <line
	     id="staffLineB4" x1="100" y1="140" x2="500" y2="140"
	     stroke="black" stroke-width="2" />
	  <line
	     id="staffLineC5" x1="100" y1="130" x2="500" y2="130"
	     stroke="white" stroke-width="1" />
	  <line
	     id="staffLineD5" x1="100" y1="120" x2="500" y2="120"
	     stroke="black" stroke-width="2" />
	  <line
	     id="staffLineE5" x1="100" y1="110" x2="500" y2="110"
	     stroke="white" stroke-width="1" />
	  <line
	     id="staffLineF5" x1="100" y1="100" x2="500" y2="100"
	     stroke="black" stroke-width="2" />
	  <ellipse 
		 id="note01" cx="300" cy="200" rx="14" ry="9"
		 fill="black"/>
    <image
         y="33.508091"
         x="78.376656"
	     id="treble"
	     xlink:href="/extensions/widgets/interactive/MusicStaff/static/treble_clef.png"
	     height="214.07819"
	     width="172.62373" />
	</svg>
    <div style="padding-left: 50px;">
      <span>Current Note: </span>
      <span id="currentNote">C4 261.63</span> Hertz

      <br><br>

      <button type="button" id="playNote" disabled="true" onClick="playCorrectNote();">
      	Play Desired Note
      </button>
      <button type="button" id="playCurrent" disabled="true" onclick="playCurrentNote()">
      	Play Current Note
      </button>

      <button type="button" onclick="submitAnswer()">
      	Check Answer
      </button>
    </div>

    <script src="../extensions/widgets/interactive/MusicStaff/static/js/music.js"></script>
  </body>
</html>
